<template>
    <div id="works">
        <back Title="我的作品" operation="编辑" @operationClick=edit()></back>

        <div class="reels" >
            <div class="Ridicule" v-if="listWorks.length===0">
                <img src="@/assets/img/absolutelyEmpty.png" alt="还没有上传过照片">
            </div>

            <div class="sample" v-show="listWorks.length!==0"   ref='scroll'>
                <img-list :ListImgs="listWorks" :isShow="isShow" @single=delect>
                </img-list> 
            </div>
        </div>

        <infinite-loading
            spinner="spiral"
            @infinite="getWorkList" 
            ref="infiniteLoading"
            :distance="100"
        >
            <div slot="no-more">
                <bot></bot>
            </div>
           
        </infinite-loading>
        <work-button-add></work-button-add> 
    </div>
</template>

<script>
import Back from "@/components/back.vue"
import workButtonAdd from "../../../components/workButtonAdd.vue"
import Bot from "../../../components/bot.vue"

import ImgList from "../../../components/ImgList.vue"

import vueWaterfallEasy from 'vue-waterfall-easy'

import {workList,delImg} from "../../../api/Pictures"


 
export default {               
    name: 'works',
components:{
    Back,workButtonAdd,Bot,ImgList,vueWaterfallEasy
},
    created(){
          
    },
    data() {
        return {
            listWorks:[],//加载的图片列表
            Sum:1,//进行第一次加载 ,记录总数
            isShow:false,//显示无图片
            page:1,//页码
            
        };
    },
    computed:{
        
     
    },
    mounted() {
       
    },

    methods: {
        //加载数据
           getWorkList($state){
             setTimeout(async()=>{
                 let {data} = await workList({
                    pageNum:this.page
                 })
                    if(data.code===200){
                        this.Sum=data.data.constSum
                        this.listWorks=this.listWorks.concat(data.data.list);
                        this.page+=1
                       // console.log(this.page);
                    }  
                     if(this.listWorks.length<this.Sum){
                        $state.loaded();
                    }else{
                        $state.complete();
            }     
            },0)
           

        },

        //删除
        async delect(id){
            let {data}=await delImg({
                "imgId":id
            })
           if(data.code==200){
             this.listWorks=this.listWorks.filter(item=>{
                  return  item.imgId!=id
            })}

        },
        //编辑
        edit(){
            this.isShow= !this.isShow
        }

    },
};
</script>

<style lang="scss" scoped>
#works{
    position: absolute;
    width: 100vw;
    padding-top: 10vh;
    height: 100vh;

}
.titel{
    width: 100%;
    height: 5vh;
}

.Ridicule>img{
    width: 100%;
}
.reels{
    width: 90%;
    box-shadow: 0px 0px 3px 1px  #b293fb; 
    padding: 5px;
    margin: auto;
    overflow:auto;
    position: static;
}
.sample{
    position: relative;
    width: 100%;
    .work{
        width: 50%;
        position: relative;
        img{ 
            width: 100%;
            padding: 1vw;
        }
    }
    
}


</style>